/**
 * 入库界面
 */
'usr strict'
import React, {
	Component
} from 'react';
import {
	View,
	Text,
	TextInput,
	Demensions,
	ListView,
	TouchableHighlight,
	ScrollView,
	StyleSheet,
	Dimensions,
	TouchableOpacity,
} from 'react-native';

import Util from './utils';
import Icon from 'react-native-vector-icons/Ionicons';



//组件
import CommentButton from './component/authorButton';
import ScrollButton from './component/scrollButton';
import FloatButton from './component/floatButton';
// import { CommonStyles, FloatButtonStyles } from './style';
import { CommonStyles, FloatButtonStyles, StyleConfig } from './style';
import NavigationBar from './component/index';
import Backer from './component/backer';



/**
 * 常量
 */
const { height, width} = Dimensions.get('window');

class CustomButton extends Component {
	render() {
		return(
			<TouchableHighlight onPress={ this.props.onPress }>
				<Text>{ this.props.valueBtn }</Text>
			</TouchableHighlight>
			);
	}
}

class SimpleList extends React.Component {
  // 初始化模拟数据
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie'])
    };
  }
  render() {
    return (
      <View>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style = {{height:100,}}>{rowData}</Text>}
        />
      </View>
    );
  }
}

class onePage extends Component {

	constructor(props) {
		super(props);
	}

	componentDidMount() {
		// const {
		// 	postAction
		// } = this.props;

	}

	renderHeaderLeftConfig(){
		let { router } = this.props;
	    return (
	    	<Backer router = { router }/>
	    )
	}

	renderHeaderRightConfig(){

	    return (
	    	<TouchableOpacity onPress={ ()=>{ alert("右键")} }>
		      <Icon
		        name='ios-person'
		        size={24}
		        style={ [CommonStyles.navbarMenu, { color: StyleConfig.mainColor }] }
		      />
		    </TouchableOpacity>
	    )
	}

	renderHeaderTitleConfig(){
	    return (
	      <Text style={ CommonStyles.navbarText }>
	        入库扫描
	      </Text>
	    )
	}

	render() {
		return (
			<View>
				<NavigationBar
					style = { CommonStyles.navbar}
		            leftButton= { this.renderHeaderLeftConfig() }
		            rightButton = { this.renderHeaderRightConfig() }
		            title={ this.renderHeaderTitleConfig() }>						
				</NavigationBar>
				<View style= {{ flexWrap: 'nowrap'}}>
					<Text>当前人员</Text>
					<Text>仓库信息</Text>
				</View>
				<View>
					<CustomButton 
						onPress = { ()=> { alert("点击进入扫描")}}
						valueBtn = { "点击进入下一笔扫描" }
					/>
					<Text>扫描结果: </Text>
				</View>
				<ScrollView>
					<SimpleList/>	
				</ScrollView>			
				<View>
		        	<FloatButton onPress={ () => alert('测试按钮')} style={ FloatButtonStyles.positionLeft }/>
				</View>			      
		    </View>
			);
	}
}

const onePageStyle = StyleSheet.create({
	rootstyle:{
		// alignItems: 'center',
		// justifyContent: 'center',
		// flexDirection: 'row',
	},
	userinfo:{
		// alignItems:'center',
		textAlign: 'center',
		// height:100,
		// width:200,
		backgroundColor:'#fefefe',

	},
	scan_input:{

	},
	scan_listview:{

	},
	group_btn:{

	},
	cellview:{
	    flexDirection: "row",
	    flexWrap: "wrap",
	},
	cell:{
	    borderBottomWidth: Util.pixel,
	    borderBottomColor: "#ccc",
	    borderRightWidth: Util.pixel,
	    borderRightColor: "#ccc",
	},
	cellfixed:{
		height: 50,
		width: 80,
		backgroundColor: '#fefefe',
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
		// flexWrap: 'wrap',

	},
});

export default onePage;
